<script>
import {reactive, shallowReactive, ref, shallowRef, readonly, onMounted} from "vue";

export default {
  name: "App",
  setup(props, context) {
    //使用ref和reactive定义响应式数据

    //ref定义复杂的数据
    const person = ref({
      name: "陶品奇",
      age: 22,
      address: "衡阳"
    })
    const showPerson = () => {
      console.log(person.value.name, person.value.age, person.value.address)
    }

    //reactive定义数据
    const account = reactive({
      userName: "taopinqi",
      userPassword: "taopinqi103",
    })

    //使用ref定义一个数组
    const musics = ref([])
    //使用reactive定义一个数组
    const names=reactive([])
    onMounted(() => {
      const server = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

      musics.value = server
      server.forEach((item)=>{
        names.push(item)
      })
    })

    return {
      person,
      account,
      musics,
      names,
      showPerson
    }
  }
}
</script>
<template>
  <div>

    <button @click="showPerson">点击</button>

    <form>
      <input type="text" v-model="account.userName">
      <input type="text" v-model="account.userPassword">
    </form>

    <h1>{{ musics }}</h1>
    <button @click="musics[0]=100">点击</button>

    <h1>{{ names }}</h1>
    <button @click="names[0]=200">点击</button>

  </div>
</template>

<style lang="less">

</style>
